<template>
  <view class="order">
    <view class="order-tabs">
      <uv-tabs
        :list="list"
        @click="click"
        activeStyle="color: #1d8b8c;background-color: #fff;padding: 3% 29%;border-radius: 50rpx;"
        lineColor="#1d8b8c"
        :scrollable="false"
        inactiveStyle="color: #fff;"
      >
      </uv-tabs>
    </view>
    <!-- 商城订单 -->
    <view class="order-s" v-if="crut == 0">
      <view class="order-tab">
        <uv-tabs :list="list2" @click="go" :scrollable="true"></uv-tabs>
      </view>
      <view class="order-s-list" v-if="cu == 0" v-for="(item, index) in ddxq" :key="index">
        <view class="osl-top" @click="goDetail(item.url)">
          <view class="ot-left">
            <image :src="item.image" mode="scaleToFill" />
          </view>
          <view class="ot-right">
            <view class="or-top">
              <view class="or-name">{{ item.name }}</view>
              <view class="or-zt">{{ item.zt }}</view>
            </view>
            <view class="or-cen">{{ item.guige }}</view>
            <view class="or-bottom"><view>￥</view>{{ item.price }}</view>
          </view>
        </view>
        <view class="osl-bottom">
          <view class="osb-left">运费:￥0.00 合计:￥120.00</view>
          <view class="osb-right"
            ><uv-button
              shape="circle"
              type="primary"
              :plain="true"
              text="订单详情"
              color="#008c8c"
            ></uv-button
          ></view>
        </view>
      </view>
      <view v-if="cu == 1">待支付</view>
      <view v-if="cu == 2">待发货</view>
      <view v-if="cu == 3">待自提</view>
      <view v-if="cu == 4">待收货</view>
      <view v-if="cu == 5">已完成</view>
    </view>
    <!-- 服务订单 -->
    <view class="order-f" v-if="crut == 1">
      <view class="order-tab">
        <uv-tabs :list="list3" @click="gofw" :scrollable="true"></uv-tabs>
      </view>
      <view class="order-s-list" v-if="fw == 0" v-for="(item, index) in fwdd" :key="index">
        <view class="osl-top"  @click="goDetail2(item.url)">
          <view class="ot-left">
            <image :src="item.image" mode="scaleToFill" />
          </view>
          <view class="ot-right">
            <view class="or-top">
              <view class="or-name">{{ item.name }}</view>
              <view class="or-zt">{{ item.zt }}</view>
            </view>
            <view class="or-cen">{{ item.guige }}</view>
            <view class="or-bottom"><view>￥</view>{{ item.price }}</view>
          </view>
        </view>
        <view class="osl-bottom">
          <view class="osb-right"
            ><uv-button
              shape="circle"
              type="primary"
              :plain="true"
              text="订单详情"
              color="#008c8c"
            ></uv-button
          ></view>
        </view>
      </view>
      <view v-if="fw == 1">待支付</view>
      <view v-if="fw == 2">待接单</view>
      <view v-if="fw == 3">已接单</view>
      <view v-if="fw == 4">服务中</view>
      <view v-if="fw == 5">已完成</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
const crut = ref(0);
const cu=ref(0);
const fw=ref(0);
const list = ref([{ name: "商城订单" }, { name: "服务订单" }]);
const list2 = ref([
  { name: "全部" },
  { name: "待支付" },
  { name: "待发货" },
  { name: "待自提" },
  { name: "待收货" },
  { name: "已完成" },
]);
const list3 = ref([
  { name: "全部" },
  { name: "待支付" },
  { name: "待接单" },
  { name: "已接单" },
  { name: "服务中" },
  { name: "已完成" },
]);
const ddxq = ref([
  {
    image: "https://picsum.photos/200?1",
    name: "商品名称商品名称",
    zt: "待支付",
    guige: "规格1",
    price: "125",
    url:'/pages/dfk/dfk'
  },
  {
    image: "https://picsum.photos/200?2",
    name: "商品名称商品名称",
    zt: "待发货",
    guige: "规格1",
    price: "125",
    url:'/pages/dfh/dfh'
  },
  {
    image: "https://picsum.photos/200?3",
    name: "商品名称商品名称",
    zt: "待自提",
    guige: "规格1",
    price: "125",
    url:'/pages/dzt/dzt'
  },
  {
    image: "https://picsum.photos/200?4",
    name: "商品名称商品名称",
    zt: "待收货",
    guige: "规格1",
    price: "125",
    url:'/pages/dsh/dsh'
  },
  {
    image: "https://picsum.photos/200?5",
    name: "商品名称商品名称",
    zt: "已完成",
    guige: "规格1",
    price: "125",
    url:'/pages/ywc/ywc'
  },
]);
const fwdd = ref([
  {
    image: "https://picsum.photos/200?6",
    name: "商品名称商品名称",
    zt: "待支付",
    guige: "规格1",
    price: "125",
    url:'/pages/dfk/dfk'
  },
  {
    image: "https://picsum.photos/200?7",
    name: "商品名称商品名称",
    zt: "待接单",
    guige: "规格1",
    price: "125",
    url:'/pages/djd/djd'
  },
  {
    image: "https://picsum.photos/200?8",
    name: "商品名称商品名称",
    zt: "待确认",
    guige: "规格1",
    price: "125",
    url:'/pages/dqr/dqr'
  },
  {
    image: "https://picsum.photos/200?9",
    name: "商品名称商品名称",
    zt: "已接单",
    guige: "规格1",
    price: "125",
    url:'/pages/dsm/dsm'
  },
  {
    image: "https://picsum.photos/200?10",
    name: "商品名称商品名称",
    zt: "服务中",
    guige: "规格1",
    price: "125",
    url:'/pages/fuwuz/fuwuz'
  },
  {
    image: "https://picsum.photos/200?10",
    name: "商品名称商品名称",
    zt: "已完成",
    guige: "规格1",
    price: "125",
    url:'/pages/ywc2/ywc2'
  },
]);
const click = (e) => {
  console.log(e);
  crut.value = e.index;
};
const go = (e) => {
  console.log(e);
  cu.value = e.index;
};
const gofw = (e) => {
  console.log(e);
  fw.value = e.index;
};
const goDetail = (url) => {
  if (url) {
    uni.navigateTo({
      url: url,
    });
  } else {
    uni.showToast({
      title: "没有要跳转的页面",
      icon: "none",
    });
  }
};
const goDetail2 = (url) => {
  if (url) {
    uni.navigateTo({
      url: url,
    });
  } else {
    uni.showToast({
      title: "没有要跳转的页面",
      icon: "none",
    });
  }
};
</script>

<style lang="scss" scoped>
@import url(./order.css);
</style>
